<template>
<!--我的订单-->
  <div class="msg">
      <Tabs :animated="false" @on-click="changeTab" v-model="tab">
        <TabPane :label="'我的消息('+userNum+')'">
          <span v-if="msgs.length > 0">
            <ul>
              <li class="clearfix" v-for="msg in msgs" @click="myMsg(msg.orderId)">
                <div class="pull-left" v-if="msg.messageStatus == 0">
                  <Badge status="warning" />
                  <img src="../../assets/viewicons.png" alt="" class="icon">
                </div>
              <div class="pull-left yidu" v-else>
                <img src="../../assets/viewicons.png" alt="" class="icon">
              </div>
              <div class="pull-left">
                <!--<p><Icon type="ios-arrow-forward" class="pull-right" size="20"/></p>-->
                <!--<p>{{msg.orderTitle}} <span class="pull-right">{{msg.createTime}}</span></p>-->
                <!--<p>{{msg.orderBody}}</p>-->
                <!--<p>订单编号：{{msg.orderId}}</p>-->
                <p class="clearfix">{{msg.orderTitle}}  <span class="pull-right">{{msg.orderBody}}<Icon type="ios-arrow-forward"  size="20"/></span></p>
                <p>订单编号：{{msg.orderId}}<span class="pull-right">{{msg.createTime}}</span></p>
              </div>
              </li>
            </ul>
            <div class="pageout"><Page :total="userTotal" :current="userPage" :page-size="size" @on-change="changePage" /></div>
          </span>
          <span v-else>
            <nodata tip="暂时还没有我的消息哦~"></nodata>
          </span>
        </TabPane>
        <TabPane :label="'系统消息('+ noticeNum +')'" >
          <span v-if="msgs.length > 0">
            <ul>
              <li class="clearfix" v-for="msg in msgs" @click.prevent="msgDetail(msg.messageId)">
                  <div class="pull-left" v-if="msg.messageStatus == 0">
                    <Badge status="warning" />
                    <img src="../../assets/msg.png" alt="" class="icon">
                  </div>
                  <div class="pull-left yidu" v-else>
                    <!--<Badge status="warning" />-->
                    <img src="../../assets/msg.png" alt="" class="icon">
                  </div>
                  <div class="pull-left">
                    <p>{{msg.messageTypeTitle}}<Icon type="ios-arrow-forward" class="pull-right" size="20"/></p>
                    <p>{{msg.messageTitle}}<span class="pull-right">{{msg.createTime}}</span></p>
                  </div>
              </li>
            </ul>
            <div class="pageout"><Page :total="noticeTotal" :current="noticePage" :page-size="size" @on-change="changePage" /></div>
          </span>
          <span v-else>
            <nodata tip="暂时还没有系统消息哦~"></nodata>
          </span>
        </TabPane>
      </Tabs>
      <Spin fix v-show="isSpinShow" >
        <div class="loader">
          <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
          <div class="font14">加载中...</div>
        </div>
      </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  li:first-child{
    padding-top: 0;
  }
  li{
    border-bottom: 1px solid #E1E1E1;
    padding: 15px 0;
    cursor: pointer;
    .icon{
      margin: 0 15px 0 2px;
    }
    .yidu{
      padding-left: 18.7px;
    }
    div:nth-child(2).pull-left{
      width: calc(100% - 79px);
      p:first-child{
        font-size: 14px;
        color: #666;
      }
      p:last-child{
        font-size: 14px;
        color: #999;
        padding-right: 20px;
      }
    }
  }
  .pageout {
    text-align: center;
    margin-top: 35px;
    height: 34px;
  }
</style>
<script type="text/ecmascript-6">
  import nodata from '../template/null'
  import {messageListWeb,centreInfoWeb} from '../../http'
  import {getStore} from '../../storage'
    export default {
        name: 'orderdetail',
        props: {},
        data() {
            return {
              isSpinShow:false,
              center:"center",
              userTotal:0,        //我的消息总数
              noticeTotal:0,      //系统消息总数
              size:10,            //消息数
              userPage:1,         //我的消息页码
              noticePage:1,       //系统消息页码
              noticeNum:0,        //系统消息未读数
              userNum:0,          //我的消息未读数
              type:2,             //当前消息类型
              msgs:'',            //消息列表
              tab:0,
            };
        },
        methods: {
          //订单详情
          myMsg(orderId){
            this.$router.push({
              name : 'orderdetail',
              query:{
                orderId: orderId,
              }
            })
          },
          //消息详情
          msgDetail(id){
            this.$router.push({
              name : 'msgdetail',
              query:{
                noticeId: id
              }
            })
          },
          //标签切换
          changeTab(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              if (this.tab === 0) {
                this.type = 2;
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取消息列表
                    messageListWeb({messageType: this.type, pageNumber: this.userPage}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.userTotal = res.data.list.total;
                        this.userNum = res.data.userNum;
                        this.noticeNum = res.data.noticeNum;
                        this.msgs = res.data.list.rows;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              } else {
                this.type = 1;
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取消息
                    messageListWeb({messageType: this.type, pageNumber: this.noticePage}).then(res => {
                      if(res.code === 200) {
                        this.isSpinShow = false;
                        this.noticeTotal = res.data.list.total;
                        this.userNum = res.data.userNum;
                        this.noticeNum = res.data.noticeNum;
                        this.msgs = res.data.list.rows;
                      }else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch
              }
            }
          },
          //换页
          changePage(pageNumber){
            this.pageNumber = pageNumber;
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              if (this.tab === 0) {
                this.type = 2;
                this.userPage = pageNumber;
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取消息列表
                    messageListWeb({messageType: this.type, pageNumber: this.userPage}).then(res => {
                      if (res.code === 200) {
                        this.isSpinShow = false;
                        this.userTotal = res.data.list.total;
                        this.userNum = res.data.userNum;
                        this.noticeNum = res.data.noticeNum;
                        this.msgs = res.data.list.rows;
                      } else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              }else {
                this.type = 1;
                this.noticePage = pageNumber;
                //用户是否登录
                centreInfoWeb().then(res => {
                  if (res.code === 200) {
                    //获取消息列表
                    messageListWeb({messageType: this.type, pageNumber: this.noticePage}).then(res => {
                      if (res.code === 200) {
                        this.isSpinShow = false;
                        this.userTotal = res.data.list.total;
                        this.userNum = res.data.userNum;
                        this.noticeNum = res.data.noticeNum;
                        this.msgs = res.data.list.rows;
                      } else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "个人中心提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    this.isSpinShow = false;
                    this.$parent.$refs.loginInput.showModal()
                  }
                }).catch()
              }
            }
          },
          getMsg(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //获取消息列表
                  messageListWeb({messageType: 2, pageNumber: this.userPage}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.userTotal = res.data.list.total;
                      this.userNum = res.data.userNum;
                      this.noticeNum = res.data.noticeNum;
                      this.msgs = res.data.list.rows;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
            }
          }
        },
        created() {
          this.getMsg()
        },
        components: {
          nodata
        }
    }
</script>
